<template>
	<view class="container">
		<view class="title-container">
			<view class="left">
				<text>{{baseName}}</text>
			</view>
			<view class="right">
				<view class="button" @click="popupShow = true">基地选择</view>
			</view>
		</view>
		<view class="list-container">
			<view class="list">
				<u-cell-group>
					<u-cell 
					:isLink="true" 
					clickable 
					rightIcon="arrow-right" 
					:title="item.landName"
					 v-for="(item,index) in listMenu" 
					 :key="index"
					 @click="handleListClick(item,index)"
					 ></u-cell>
				</u-cell-group>
			</view>
		</view>
		<!-- 弹出层 -->
		<u-picker :defaultIndex="[0]" :show="popupShow" keyName="baseName" :columns="baseList" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {findOperatorBaseAndLand} from "@/api/api.js"
	export default {
		data() {
			return {
				baseName:"XX东林智慧种植基地",
				listMenu:[],
				popupShow:false,
				baseList:[[]]
			};
		},
		onShow() {
			this.setAllBase();
		},
		methods:{
			getAllBaseOrBlock(params){
				uni.showLoading({
					mask:true
				})
				let query = `baseId=${params || '' }`
				if(!params){
					return findOperatorBaseAndLand(query)
				}else{
					return findOperatorBaseAndLand(query)
				}
			},
			async setAllBase(){
				let res = await this.getAllBaseOrBlock()
				try{
					if(res?.data.code == 200){
						this.baseList[0] = res.data.data
						uni.hideLoading()
						this.selectDefaultBase()
					}else{
						uni.$u.toast(res.data.msg)
						uni.hideLoading()
					}
				}catch(e){
					//TODO handle the exception
					uni.$u.toast(e)
					uni.hideLoading()
					throw e
				}
			},
			async  selectDefaultBase(){
				let defaultBaseId = this.baseList[0][0].id
				const res = await this.getAllBaseOrBlock(defaultBaseId)
				try{
					if(res?.data.code == 200){
						this.listMenu = res.data.data
						uni.hideLoading()
					}else{
						uni.$u.toast(res.data.msg)
						uni.hideLoading()
					}
				}catch(e){
					//TODO handle the exception
					uni.$u.toast(e)
					uni.hideLoading()
					throw e
				}
			},
			handleListClick(item){
				uni.navigateTo({
					url:"/pages/operator/baseDetail?blockId="+item.landId
				})
			},
			confirm(e){
				uni.showLoading({
					mask:true
				})
				let value = e.value[0].id
				this.getAllBaseOrBlock(value).then(res=>{
					if(res?.data.code == 200){
						this.listMenu = res.data.data
						uni.hideLoading()
					}else{
						uni.$u.toast(res.data.msg)
						uni.hideLoading()
					}
				}).catch(e=>{
					uni.$u.toast(e)
					throw e
				})
				this.popupShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	.title-container{
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			color: #FF8318;
			font-size: 32rpx;
			font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
			font-weight: bold;
			color: #FF8318;
			line-height: 32rpx;
		}
		.right{
			.button{
				text-align: center;
				line-height: 68rpx;
				width: 148rpx;
				height: 68rpx;
				border-radius: 34rpx;
				background: #1BC46D;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				&:active{
					opacity: .8;
				}
			}
		}
	}
	.list-container{
		padding: 0 30rpx;
		.list{
			background-color: #ffffff;
			border-radius: 8rpx;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.12);
		}
	}
}
</style>
